﻿@page "/chart/range-area"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart'>Blazor Range Area Chart</a> example visualizes the maximum and minimum temperatures of different months with default range area series in the chart.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the range area type chart. The range area type chart is used to display continuous data points as a set of lines varying between high and low values over time intervals and across different categories.</p>
    <p>You can also zoom the chart (use selection option) to check the temperature for a week or a day.</p>
    <p>More information about the range area series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/range-area'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Temperature Variation" Theme="@Theme">
        <ChartArea>
            <ChartAreaBorder Width="0"></ChartAreaBorder>
        </ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis LabelFormat="{value}˚C">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
        <ChartLegendSettings Visible="false"></ChartLegendSettings>
        <ChartZoomSettings EnableSelectionZooming="true" Mode="ZoomMode.X"></ChartZoomSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" Name="India" XName="Period" High="HighTemp" Low="LowTemp" Opacity="0.4" Type="ChartSeriesType.RangeArea">
            </ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>


@code{

    private Random randomNum = new Random();
    private Theme Theme { get; set; }
    public List<RangeAreaChartData> ChartPoints { get; set; }

    protected override void OnInitialized()
    {
        ChartPoints = this.GetData();
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    private List<RangeAreaChartData> GetData()
    {
        List<RangeAreaChartData> chartData = new List<RangeAreaChartData>();
        double value = 35;
        for (var i = 0; i < 359; i++)
        {
            if (randomNum.NextDouble() > .5)
            {
                value += randomNum.NextDouble();
            }
            else
            {
                value -= randomNum.NextDouble();
            }
            chartData.Add(new RangeAreaChartData() { Period = new DateTime(2015, 1, 1).AddDays(i), HighTemp = value, LowTemp = (value - 10) });
        }
        return chartData;
    }

    public class RangeAreaChartData
    {
        public DateTime Period { get; set; }
        public double HighTemp { get; set; }
        public double LowTemp { get; set; }
    }

}
